<template>
  <BasicTable @register="registerTable" @selection-change="handleSelectionChange">
    <template #toolbar>
      <a-button type="primary" @click="handleCreate">添加角色</a-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'headPic'">
        <a-avatar shape="square" :src="record.headPic" />
      </template>
      <template v-if="column.dataIndex === 'enableStatus'">
        {{ record.enableStatus === 1 ? '启用' : '禁用' }}
      </template>
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            label: '编辑',
            icon: 'ant-design:edit-outlined',
            onClick: handleEdit.bind(null, record),
          },
          {
            label: '权限',
            icon: 'ant-design:setting-outlined',
            onClick: handleSettingRuleMenu.bind(null, record),
          },
          {
            label: '删除',
            icon: 'ic:outline-delete-outline',
            onClick: handleDelete.bind(null, record),
          },
        ]"
      />
    </template>
  </BasicTable>
  <RoleModal @register="registerModal" @success="reload" />
  <RoleMenuDrawer @register="registerDrawer" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
  import { message, Modal } from 'ant-design-vue';
  import { fetchRoleList, deleteRole } from '/@/api/sys/role';
  import { searchFormSchema, roleColumns } from './role.data';
  import RoleModal from './components/RoleModal.vue';
  import RoleMenuDrawer from './components/RoleMenuDrawer.vue';
  import { useModal } from '/@/components/Modal';
  import { useDrawer } from '/@/components/Drawer';

  const selectedRows = ref<Recordable[]>([]);

  const [registerTable, { reload, updateTableDataRecord }] = useTable({
    title: '角色列表',
    api: fetchRoleList,
    rowKey: 'id',
    columns: roleColumns,
    showIndexColumn: true,
    tableSetting: {
      cacheKey: 'role_list',
    },
    formConfig: {
      labelWidth: 100,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    beforeFetch({ pageIndex, pageSize, name }) {
      return {
        pageIndex,
        pageSize,
        conditions: [{ field: 'name', value: name ?? '', operator: 9 }],
      };
    },
    actionColumn: {
      width: 300,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const [registerModal, { openModal }] = useModal();

  const [registerDrawer, { openDrawer }] = useDrawer();

  const handleCreate = () => {
    openModal(true, {
      isUpdate: false,
    });
  };

  const handleSelectionChange = ({ rows }) => {
    selectedRows.value = rows;
  };

  const handleEdit = (record: Recordable) => {
    openModal(true, {
      record,
      isUpdate: true,
    });
  };

  const handleSettingRuleMenu = (record: Recordable) => {
    openDrawer(true, {
      record,
    });
  };

  const handleDelete = (record: Recordable) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除系统角色吗?',
      onOk: async () => {
        await deleteRole(record.id);
        message.success('删除系统角色成功！');
        reload();
      },
    });
  };
</script>
<style scoped></style>
